<template>
  <div class="right-box">
    <div style="padding-right:20px;min-width: 200px">

      <div>
        <span>咨询热线：</span><span style="color:#EB6633" @click="openHomeWeb">400-9906-997</span>
      </div>
      <div>
        <span>产品介绍：</span><span style="color:#EB6633;cursor:pointer;" @click="openHomeWeb">www.snpstg.com</span>
      </div>

    </div>
    <SystemChange />
    <Search />
    <Screenfull
      class="screenfull"
      :style="{cursor:'pointer'}"
    />
    <Message />
    <el-popover
      placement="bottom"
      trigger="hover"
      width="220px"
    >
      <template #reference>
        <span
          class="header-avatar"
          style="cursor: pointer;display: flex;"
        >
          <CustomPic />
          <span style="margin: 0px 5px">{{ userInfo.realName }}</span>
          <div
            v-if="userInfo?.dept?.deptName"
            style="max-width: 120px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;margin: 0px 5px"
          >[{{ userInfo?.dept?.deptName }}]</div>
          <i class="el-icon-arrow-down" />
        </span>
      </template>
      <div>
        <div style="margin-bottom:10px">
          <span style="font-size: 16px;font-weight: 600;margin-right:10px">{{ userInfo.realName }}</span>
          <span>{{ userInfo?.dept?.deptName }}</span>
        </div>
        <div style="margin-bottom:10px">
          <div
            class="drop-item"
            style="display:flex;align-items:center"
          >
            <div style="width:58px;text-align:right;flex-shrink: 0;">用户名：</div>
            <div>{{ userInfo?.userName }}</div>
          </div>
        </div>
        <div style="margin-bottom:10px">
          <div
            class="drop-item"
            style="display:flex;align-items:center"
          >
            <div style="width:58px;text-align:right;flex-shrink: 0;">邮箱：</div>
            <div>{{ userInfo?.email }}</div>
          </div>
        </div>
        <div style="margin-bottom:10px">
          <div
            class="drop-item"
            style="display:flex;align-items:center"
          >
            <div style="width:58px;text-align:right;flex-shrink: 0;">手机号：</div>
            <div style="width:100%;display:flex;justify-content:space-between;align-items:center;">
              <span>{{ userInfo?.tel }}</span>
              <el-button
                type="text"
                style="padding:0px;min-height: 20px;"
                @click="changePhone"
              >
                <i
                  class="iconfont icon-bianji"
                  style="color: #417ff9"
                />
              </el-button>
            </div>
          </div>
        </div>
        <div style="margin-bottom:20px">
          <div
            class="drop-item"
            style="display:flex;align-items:center"
          >
            <div style="width:58px;text-align:right;flex-shrink: 0;">密码：</div>
            <div>
              <el-button
                type="text"
                style="padding:0px;min-height: 20px;"
                @click="changePassword"
              >修改密码</el-button>
            </div>
          </div>
        </div>
        <div>
          <div style="display:flex;justify-content:center;">
            <el-button
              type="primary"
              size="small"
              plain
              @click="LoginOut"
            >退出登录</el-button>
          </div>
        </div>
      </div>
    </el-popover>
    <phone ref="phoneRef" />
    <password ref="passwordRef" />
  </div>
</template>

<script>
import Screenfull from './screenfull/index.vue'
import Search from './search/search.vue'
import { mapActions, mapGetters } from 'vuex'
import CustomPic from '@/components/customPic/index.vue'
import SystemChange from '@/components/systemChange/index.vue'
import Message from './message/index.vue'
import phone from './Modify/phone.vue'
import password from './Modify/password.vue'

export default {
  name: 'Layout',
  components: {
    Screenfull,
    Search,
    CustomPic,
    SystemChange,
    Message,
    phone,
    password,
  },
  data() {
    return {
      show: false,
      isCollapse: false,
      isSider: true,
      isMobile: false,
      isShadowBg: false,
      loadingFlag: false,
      reloadFlag: true,
      value: '',
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo', 'sideMode', 'baseColor']),
  },
  created() {},
  methods: {
    openHomeWeb(){
      window.open('http://www.snpstg.com/Ourproducts?w=1&tab=5')
    },
    ...mapActions('user', ['LoginOut', 'GetUserInfo']),
    reload() {
      this.reloadFlag = false
      this.$nextTick(() => {
        this.reloadFlag = true
      })
    },
    changePhone() {
      this.$refs.phoneRef.open()
    },
    changePassword() {
      this.$refs.passwordRef.open()
    },
  },
}
</script>

<style lang="scss">

</style>
